<template>
  <div class="singer-list">
    <ul class="content" v-for="singer of list" :key="singer.singer_id">
      <li class="item">
        <img :src="singer.singer_pic" style="width:60px;border-radius:50%;" />
        <span class="sp">{{singer.singer_name}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      required: true,
    },
  },
};
</script>

<style scoped>
.content {
  list-style: none;
}
.item {
  display: flex;
  align-items: center;
  padding-left: 10px;
}
.item > img {
  margin-top: 15px;
}
.sp {
  padding-left: 30px;
  color: rgba(26, 26, 26, 0.5);
}
</style>